<template name="projectAdd">
<view class="bgzd">
	<view class="form">
		<view class="form_top">
			<text>添加项目</text>
			<image @click="close" src="/static/img/none_close.png"></image>
		</view>
		<view class="view_input1">
		    <view class="view_input_title1">项目名称:</view>
			<input class="view_input_input1" type="text" v-model="form.name"
			placeholder-class="placeholderClass" placeholder="请输入项名称"/>
		</view>
		<view class="view_input1">
		    <view class="view_input_title1">手工费:</view>
			<input class="view_input_input1" type="number" v-model="form.fee"
			placeholder-class="placeholderClass" placeholder="请输入手工费"/>
		</view>
		
		<table border="0" width="96%" cellspacing="0" cellpadding="0"
		v-if="form.goods.length > 0">
			<tr>
				<td class="td1">使用物品</td>
				<td class="td2">使用数量</td>
				<td class="td3">操作</td>
			</tr>
			<tr v-for="(item,index) in form.goods">
				<td class="td1">{{item.name}}</td>
				<td class="td2">
					<input type="num" placeholder="请输入数量" v-model="item.use_num"/>
				</td>
				<td class="td3">
					<img class="picker_img" @click="del(index)" src="/static/img/none_delete.png" alt="">
				</td>
			</tr>
		</table>
		
		<view class="pub_add" @click="formClick">
			<img src="/static/img/pub.png" alt="">
			<text>选择使用物品</text>
		</view>
		
		
		<view class="form_footer">
			<button v-if="addRoleTrue" @click="add" class="strue">确认添加</button>
		</view>
		
		
		<view class="formBg" v-if="formAddShow">
			<view class="form1">
				<view class="form_top1">
					<text>选择物品</text>
					<image @click="close1" src="/static/img/none_close.png"></image>
				</view>
				<!-- <view class="form_title">选择物品</view> -->
				<view class="view_input">
					<view class="view_goods_title">选择物品:</view>
					<picker class="view_goods_picker" @change="bindGoods" :value="goodsIndex" 
					:range="goods" range-key="name" v-if="goods.length > 0">
						<view>
							{{goods[goodsIndex]['name']}}
							<image class="picker_img" src="/static/img/buttom.png"></image>
						</view>
					</picker>
				</view>
			</view>
		</view>
		
		
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	name: "projectAdd",
	//属性
	data() {
		return {
			addRoleTrue:true,
			form:{
				goods:[]
			},
			formAddShow:false,
			goods:[],
			goodsIndex:0
		}
	},
	//组件生命周期
	created:function(e){

	},
	computed :{
		money:function () {
			return parseFloat(this.pay_money)+parseFloat(this.give_money);	
		}
	},
	methods:{
		close:function(){
			this.$emit('func',{'type':0,'model':'projectAddShow'})
		},
		close1:function(){
			this.formAddShow = false
		},
		formClick:function(){
			this.formAddShow = true
			if(this.form.goods.length == 0){
				this.getGoods()
			}
		},
		del:function(key){
			this.form.goods.splice(key,1)
		},
		getGoods:function(){
			var data = {oa_id:uni.getStorageSync('oa_id')}
			var that = this
			request({
				url: 'manage/goods/all',
				method: 'get',
				data:data,
				success: (res) => {
					that.goods = res.data.data
				},
			})
		},
		bindGoods:function(e){
			let key = e.detail.value
			var goods_list = this.form.goods
			this.form.goods = goods_list.concat(this.goods[e.detail.value])
			this.formAddShow = false
		},
		add:function(){
			if(!this.form.name){
				uni.showToast({
					title: '请填写项目名称!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			if(!this.form.fee){
				uni.showToast({
					title: '请填写手工费!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			if(this.form.goods.length == 0){
				uni.showToast({
					title: '请选择使用物品!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			for(var x in this.form.goods){
				if(!this.form.goods[x]['use_num']){
					uni.showToast({
						title: '请输入使用物品的数量!!',
						icon: "none", 
						position:'bottom',
					});
					return;
				}
			}
			this.form.oa_id = uni.getStorageSync('oa_id')
			var that = this
			this.addRoleTrue = false
			request({
				url: 'manage/card/add',
				method: 'post',
				data:this.form,
				success: (res) => {
					if(res.data.code == 1){
						uni.showToast({
							title: '添加成功!!',
							icon: "none", 
							position:'bottom',
						});
						that.$emit('func',{'type':1,'model':'projectAddShow'})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: "none", 
							position:'bottom',
						});
					}
				},
			})
		},
	}
}
</script>
<style>
.bgzd{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index:99;
	padding-left:5%;
}
.form{
    padding-top:20rpx;
    width:90%;
	top:20%;
    /* bottom:0; */
    padding-bottom: 20rpx;
    background:#d9d9d9;
    position: fixed;
    z-index:100;
	border-radius: 30rpx;
}
.form_top{
	padding-left:2%;
    font-weight:bold;
    font-size:20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width:95%;
}
.form_top1{
	padding-left:3%;
    font-weight:bold;
    font-size:20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width:95%;
	padding-top:20rpx;
}
.form_top1 image{
    width:35rpx;height:35rpx;
    margin-right: 20rpx;
}
.form_top image{
    width:35rpx;height:35rpx;
    margin-right: 20rpx;
}
.form_footer{
	margin-left:5%;
    width:90%;
    margin-top:20rpx;
}
.strue{
    width:100%;height:70rpx;line-height:70rpx;
    background:#ff861a;color:#fff;
	border-radius: 40rpx;
}
.pub_add{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height:70rpx;
	width:40%;
	background:#009900;
	color:#FFFFFF;
	margin-left: 30%;
	margin-top:20rpx;
}
.pub_add img{
	width:50rpx;
	height:50rpx;
}
.formBg{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index:99;
	padding-top:60%;
	padding-left:10%;
}
.form1{
	background:#FFFFFF;
	width:80%;
	border-radius: 30rpx;
	padding-bottom:100rpx;
}
.table{
	width:100%;
	padding:10rpx 20rpx 120rpx 20rpx;
}
table{
	margin-top:30rpx;
	margin-left:2%;
}
td{
	border:1rpx solid #000;
	text-align: center;
	height:70rpx;
	line-height:70rpx;
}
.td1{
	width:50%;
}
.td2{
	width:30%;
}
.td3{
	width:20%;
}
.view_goods_title{
	font-size:16px;
	width:40%;
	text-align: center;
}
.view_goods_picker{
	width:50%;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1rpx dashed #A3A3A3;
}
.picker_img{
	width:40rpx;
	height:40rpx;
}
</style>